<template>
<div>
  <div class="Map1">
     <div style="margin-top: 20px">
        <el-radio-group v-model="chose" size="medium" @change="changeChose" fill="#209e91">
          <el-radio-button label="近一周" ></el-radio-button>
          <el-radio-button label="近一月"></el-radio-button>
          <el-radio-button label="本年"></el-radio-button>
        </el-radio-group>
      </div>
    <div id="dispathNum"></div>
  </div>
</div>
</template>
<script>
  export default {
    name: "FreightBillStatistics",
    data() {
      return {
        chose:'近一周',
        sdata:[],
        xdata:[]
      }
    },
    methods: {
      getDispath(){
        let chartDom = document.getElementById('dispathNum');
        let myChart = this.$echarts.init(chartDom);
        let option;
        let color = ['#62bbb1'];
        setTimeout(()=>{
          myChart.setOption(
              {
                color:color,
                tooltip: {
                trigger: 'axis',
                axisPointer: {
                      type: 'cross'
                    }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xdata
              },
              yAxis: {
                type: 'value',
                splitNumber: 1
              },
              series: [
                {
                  data: this.sdata,
                  type: 'line',
                  //折线面积背景堆积
                  areaStyle: {},
                  //将折线变成平滑的线条，不是直线
                  smooth:true
                }
              ]
          })

        },1500)
      // option && myChart.setOption(option);
      this.getWindowAdjust(myChart);
      },
      getWeekData(){
        this.$axios({
          url: 'dispatch/ticket/getTicketDoneRecentWeek',
          method: 'post'
        }).then(res => {
          // console.info(res.data.object)
          if(res.data.success){
              this.xdata=res.data.object.xdata;
              this.sdata=res.data.object.sdata;
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      },
      getMonthData(){
        this.$axios({
          url: 'dispatch/ticket/getTicketDoneRecentMonth',
          method: 'post'
        }).then(res => {
          // console.info(res.data.object)
          if(res.data.success){
            this.xdata=res.data.object.xdata;
            this.sdata=res.data.object.sdata;
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      },
      getYearData(){
        this.$axios({
          url: 'dispatch/ticket/getTicketDoneThisYear',
          method: 'post'
        }).then(res => {
          // console.info(res.data.object)
          if(res.data.success){
            this.xdata=res.data.object.xdata;
            this.sdata=res.data.object.sdata;
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      },
      changeChose(){
        // console.info(this.chose);
        if(this.chose=='近一周'){
          this.getWeekData();
          this.getDispath();
        }else if(this.chose=='近一月'){
          this.getMonthData();
          this.getDispath();
        }else{
          this.getYearData();
          this.getDispath();
        }
      },
    //窗口自适应
    getWindowAdjust(obj){
      window.addEventListener("resize", function() {
        obj.resize();
      });
    }
    },
    mounted() {
      // this.thisMonth=this.getYearMonth(new Date());
      this.getWeekData();
      this.getDispath();
    }
  }
</script>

<style scoped>
.Map1{

  width: 100%;
  float: left;
  /* margin-left: 25px;
  margin-top: 25px; */
}
#dispathNum{
  width: 100%;
  height: 330px;
}
</style>
